<template>
  <div class="mv">
    <div class="mv_title">M V</div>
    <ul class="mv_type">
      <li :class="{select:currentIndex===index}" @click="chooseTag(index)" v-for="(tag,index) in area">{{tag.id===15?'精选':tag.name}}</li>
    </ul>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(pages,index) in changeMVList" :key="index">
          <div class="swiper-content" v-for="(page,index) in pages" :key="index">
            <div class="info_img" @click="toMvDetail(page.mv_mid)">
              <img :src="page.mv_pic" alt="">
              <div class="icon">
                <span class="iconfont icon-bofang1"></span>
              </div>
            </div>
            <div class="info_name ellipsis" @click="toMvDetail(page.mv_mid)">{{page.mv_name}}</div>
            <div class="info_singer ellipsis">{{page.singers}}</div>
            <div class="info_count">
              <span class="iconfont icon-tuya-"></span>
              <!--toFixed(num),表示保留num位小数-->
              <span>{{page.play_num>10000?((page.play_num/10000).toFixed(1)+'万'):page.play_num}}</span>
            </div>
          </div>
        </div>
      </div>
      <!--分页样式-->
      <div class="swiper-pagination"></div>
      <!--前进后退-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Swiper from 'swiper';
    import 'swiper/css/swiper.min.css';
    export default {
        name: "RecommendMv",
        data(){
          return{
            area:[],//初始化空对象存储MV的标签
            currentIndex:0,
            mvList:[],//初始化mv的列表数组
          }
        },
        methods:{
          chooseTag(index){
            this.currentIndex=index;
            this.$store.dispatch('getMVDetail',{area_id:this.area[index].id,version_id:7,order:0,start:0,size:40})
          },
          toMvDetail(mid){
            this.$router.replace('/mvdetail/'+mid)
          }
        },
        computed:{
          ...mapState(['MV']),
          changeMVList(){
            let outerArr=[],innderArr=[];
            this.mvList.forEach((item,index)=>{
                if((index+1)%10!==0){
                  innderArr.push(item);
                }else{
                  innderArr.push(item);
                  outerArr.push(innderArr);
                  innderArr=[];
                }
            })
            return outerArr;
          },
        },
        mounted(){
          this.$store.dispatch('getMVDetail',{area_id:15,version_id:7,order:0,start:0,size:40})
        },
        watch:{
          MV(value){//通过监听MV的变化，来获取标签
            this.area=this.MV.mv_tags.area;
            this.mvList=this.MV.mv_list;
            // console.log(this.mvList);
          },
          //当数据加载成功以后，再响应滑动事件
          changeMVList(value){
            this.$nextTick(()=>{
              new Swiper('.swiper-container', {
                // autoplay:true,
                loop:true,
                speed:2000, // 播放的速度
                // 如果需要分页器，即下面的小圆点
                pagination: {
                  el:'.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
              })
            })
          }
        }
    }
</script>

<style scoped lang="less">
  .mv{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
  .mv .mv_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
  .mv .mv_type li{display: inline-block;margin: 35px 25px;}
  .mv .mv_type li.select{color: #31c27c;}
  .mv .mv_type li:hover{cursor: pointer;color: #31c27c;}
  .mv{
    .swiper-container{
      padding-bottom: 30px;
      font-size: 14px;
      .swiper-wrapper{
        .swiper-slide{
          .swiper-content{
            display: inline-block;
            width: 224px;
            margin-right: 15px;
            position: relative;
            text-align: left;
            margin-bottom: 5px;
              &:nth-child(5n){
               margin-right: 0px;
              }
              .info_img{
                overflow: hidden;
                &:hover{
                  &:after{
                    content: '';
                    display: block;
                    width:224px;
                    height: 127px;
                    position: absolute;
                    top:0;
                    left: 0;
                    background: rgba(0,0,0,.3);
                    z-index: 1;
                  }
                  >img{
                    transform: scale(1.1);
                    transition: 0.4s;
                  }
                  .icon{
                    opacity: 1;
                    transform: scale(1.1);
                  }
                }
                img{
                  width: 224px;
                }
                .icon{
                  position: absolute;
                  z-index: 1;
                  top:42px;
                  left: 90px;
                  background: white;
                  border-radius: 50%;
                  height:40px;width: 40px;
                  text-align: center;
                  line-height: 40px;
                  opacity: 0;
                  transition: all 1s;
                  .icon-bofang1{
                    font-size: 20px;
                    display: inline-block;
                    margin-left: 4px;
                    margin-top: 3px;
                  }
                }
              }
              .info_name{
                margin-top: 18px;
                &:hover{
                  cursor: pointer;
                  color: #31c27c;
                }
              }
              .info_singer{
                color: #999;
                margin: 10px 0;
                >span{
                  &:hover{
                    cursor: pointer;
                    color: #31c27c;
                  }
                }
              }
              .info_count{
                color: #999;
                margin-bottom: 5px;
                .icon-weibiaoti1{
                  font-size: 20px;
                  vertical-align: -2px;
                }
              }


          }
        }
      }
      .swiper-button-prev,.swiper-button-next{
        color: rgba(0,0,0,0.7);
        top: 30%;
        background-color: #efeeef;
        padding: 20px 10px;
      }
    }
  }
</style>
